<template>
  <div id="TabBar">
    <div class="tabbar_item"
      v-for="(item, index) in imgList" :key="index"
      @click="change(index)"
      :style="active == index ? 'background-color: rgb(51,65,85);':''">
      <img :src="active == index ? item.img : item.img2" />
      <div style="width: 55%;
        height: .3125rem;
        background-color: rgb(20,184,166);
        position: relative;
        bottom: 1rem;
        margin: auto;
        border-radius: 1.25rem 1.25rem 0 0;
        " v-if="active == index"></div>
    </div>
  </div>
</template>

<script lang="js" setup>
import router from '@/router';
import { ref } from 'vue';

let active = ref(0)
let imgList = [
  {
    img: '/public/img/home.png',
    img2: '/public/img/home1.png',
    title: 'home'
  },
  {
    img: '/public/img/stethoscope-line.png',
    img2: '/public/img/stethoscope-line1.png',
    title: 'appoint'
  },
  {
    img: '/public/img/information.png',
    img2: '/public/img/information1.png',
    title: 'dialogue'
  },
  {
    img: '/public/img/drug.png',
    img2: '/public/img/drug1.png',
    title: 'drug'
  },
  {
    img: '/public/img/my.png',
    img2: '/public/img/my1.png',
    title: 'personage'
  }
];
let change = (index) => {
  active.value = index
  router.push(imgList[index].title)
}

</script>

<style>
#TabBar {
  width: 21.875rem;
  height: 4.6875rem;
  background-color: rgb(30, 41, 59);
  position: fixed;
  bottom: 1.5625rem;
  left: 5%;
  border-radius: 1.5625rem;
  padding: .625rem;
  display: flex;
  justify-content: space-between;
}

#TabBar .tabbar_item {
  width: 3.125rem;
  height: 3.125rem;
  text-align: center;
  /* 垂直居中 */
  line-height: 3.75rem;
  border-radius: .9375rem;
  color: #fff;
  font-size: 1.25rem;
  background-color: rgb(30, 41, 59);
  margin-top: .125rem;
}

#TabBar .tabbar_item img {
  width: 1.5625rem;
}
</style>
